
<head>
<link rel="stylesheet" type="text/css" href="${base}/css/development/fromtable.css"/>
</head>
<body style="width: 1200px;height: 500px;">
<input type="hidden" value="${obj.table_name}" id="table_name">
<div style="margin: 0;">
    <div class="col-sm-12 btn-top">
        <button class="btn btn-default btn-add" onclick="appendField();">添加</button>
        <button class="btn btn-default bnt-delete" onclick="delField();">删除</button>
    </div>
</div>
<div id="tpl" style="display:none">
<table>
<tbody >
            <tr >
                <td>1</td>
                <td><input type="checkbox" name="field_select"></td>
                <td><input type="text" style="width: 100px;height: 35px;"  name="field_name" value=""></td>
                <td><input type="text" style="width: 100px;height: 35px;"  name="field_comment" value=""></td>
                <td><input type="text" style="width: 80px;height: 35px;"  name="field_length" value=""></td>
                <td><input type="text" style="width: 80px;height: 35px;" name="field_default" value=""></td>
                <td>
                    <select class="selectpicker show-tick form-control" style="height: 35px;font-size: 12px;" name="field_type">
                        <option value="varchar" selected="selected">varchar</option>
                        <option value="int">int</option>
                        <option value="double">double</option>
                        <option value="text">text</option>
                    </select>
                </td>
                <td><input type="text" style="width: 80px;height: 35px;"  value="" name="field_order"></td>
                <td>
                    <select class="selectpicker show-tick form-control" style="height: 35px;font-size: 12px;" name="widget_type">
                        <option value="inline_text" selected:selected>inline_text</option>
                        <option value="checkbox">checkbox</option>
                        <option value="select">select</option>
                        <option value="radio">radio</option>
                        <option value="inline_textarea">inline_textarea</option>
                        <option value="hidden">hidden</option>
                        <option value="image_div">image</option>
                    </select>
                </td>
                <td><input type="text" style="width: 80px;height: 35px;" name="form_default" value=""></td>                                
                <td><input type="checkbox" name="is_id" disabled="true"></td>
                <td><input type="checkbox" name="is_null"></td>
            </tr>
</tbody>
</table>
</div>
<div class="row"  style="width: 1100px;height: 90%;overflow:auto; position: relative;margin: 0;"
     data-spy="scroll" data-target="#navbar-example" data-offset="0">
    <div class="col-sm-12">
        <table class="table table-window" style="text-align: center;" >
        <tbody id="from_field_table">
             <tr style="background-color: #efefef;">
                <th>序号</th>
                <th>操作</th>
                <th>字段名称</th>
                <th>字段备注</th>
                <th>字段长度</th>
                <th>字段默认值</th>
                <th>字段类型</th>
                <th>字段排序</th>
                <th>表单类型</th>
                <th>表单默认值</th>
                <th>主键</th>
                <th>允许空值</th>
            </tr>
            <tr>
                <td>1</td>
                <td><input type="checkbox" name="field_select" disabled="true"></td>
                <td><input type="text" style="width: 100px;height: 35px;" value="id" name="field_name" disabled="true"></td>
                <td><input type="text" style="width: 100px;height: 35px;" value="主键" name="field_comment" disabled="true"></td>
                <td><input type="text" style="width: 80px;height: 35px;"  value="32" name="field_length" disabled="true"></td>
                <td><input type="text" style="width: 80px;height: 35px;" name="field_default" disabled="true"></td>
                <td>
                    <select class="selectpicker show-tick form-control" style="height: 35px;font-size: 12px;" disabled="true" name="field_type">
                        <option value="varchar" selected:selected>varchar</option>
                    </select>
                </td>
                <td><input type="text" style="width: 80px;height: 35px;"  value="" name="field_order" disabled="true"></td>
                <td>
                    <select class="selectpicker show-tick form-control" style="height: 35px;font-size: 12px;" disabled="true" name="widget_type">
                        <option value="hidden" selected:selected>hidden</option>
                    </select>
                </td>
                <td><input type="text" style="width: 80px;height: 35px;" name="form_default" value="" disabled="true"></td> 
                <td><input type="checkbox" name="is_id" checked="checked" disabled="true"></td>
                <td><input type="checkbox" name="is_null" disabled="true"></td>
            </tr>
            
            <tr>
                <td>2</td>
                <td><input type="checkbox" name="field_select" disabled="true"></td>
                <td><input type="text" style="width: 100px;height: 35px;" value="project_id" name="field_name" disabled="true"></td>
                <td><input type="text" style="width: 100px;height: 35px;" value="所属项目id" name="field_comment" disabled="true"></td>
                <td><input type="text" style="width: 80px;height: 35px;"  value="32" name="field_length" disabled="true"></td>
                <td><input type="text" style="width: 80px;height: 35px;" name="field_default" disabled="true"></td>
                <td>
                    <select class="selectpicker show-tick form-control" style="height: 35px;font-size: 12px;" disabled="true" name="field_type">
                        <option value="varchar" selected:selected>varchar</option>
                    </select>
                </td>
                <td><input type="text" style="width: 80px;height: 35px;"  value="" name="field_order" disabled="true"></td>
                <td>
                    <select class="selectpicker show-tick form-control" style="height: 35px;font-size: 12px;" disabled="true" name="widget_type">
                        <option value="hidden" selected:selected>hidden</option>
                    </select>
                </td>        
                <td><input type="text" style="width: 80px;height: 35px;" name="form_default" value="" disabled="true"></td>         
                <td><input type="checkbox" name="is_id" disabled="true"></td>
                <td><input type="checkbox" name="is_null" disabled="true"></td>
            </tr>
            
            <tr>
                <td>3</td>
                <td><input type="checkbox" name="field_select" disabled="true"></td>
                <td><input type="text" style="width: 100px;height: 35px;" value="serial_number" name="field_name" disabled="true"></td>
                <td><input type="text" style="width: 100px;height: 35px;" value="序号" name="field_comment" disabled="true"></td>
                <td><input type="text" style="width: 80px;height: 35px;"  value="32" name="field_length" disabled="true"></td>
                <td><input type="text" style="width: 80px;height: 35px;" name="field_default" disabled="true"></td>
                <td>
                    <select class="selectpicker show-tick form-control" style="height: 35px;font-size: 12px;" disabled="true" name="field_type">
                        <option value="varchar" selected:selected>varchar</option>
                    </select>
                </td>
                <td><input type="text" style="width: 80px;height: 35px;"  value="1" name="field_order" disabled="true"></td>
                <td>
                    <select class="selectpicker show-tick form-control" style="height: 35px;font-size: 12px;" disabled="true" name="widget_type">
                        <option value="hidden" selected:selected>hidden</option>
                    </select>
                </td>        
                <td><input type="text" style="width: 80px;height: 35px;" name="form_default" value="" disabled="true"></td>         
                <td><input type="checkbox" name="is_id" disabled="true"></td>
                <td><input type="checkbox" name="is_null"  checked="checked"></td>
            </tr>
        </tbody>
        </table>
    </div>
</div>
<script>
$(function(){
	initTableField();
});

function initTableField(){
	var table_name = $.trim($("#table_name").val());
	$.ajax({
        url: base + "/dataCenter/businessdata/findFromFieldList/"+table_name,
        async: true,
        data: {},
        success: function (data, textStatus, jqXHR) {
        	if(data != null && data.length > 0){
	        	$.each(data,function(index,value){
	        		if("id"!=data[index].field_name && "project_id"!=data[index].field_name && "serial_number"!=data[index].field_name){
	        			var field_name = data[index].field_name;
	        			var field_comment = data[index].field_comment;
	        			var field_length = data[index].column_type;
	        			field_length = field_length.substr(field_length.indexOf("(")+1,field_length.indexOf(")")-field_length.indexOf("(")-1);
	        			var field_type = data[index].field_type;
	        			var field_order = data[index].field_order==null?"":data[index].field_order;
	        			var is_null = data[index].is_null;
	        			var form_type = data[index].widget_type;//结构化表单控件类型 
	        			var form_default = data[index].form_default==undefined?"":data[index].form_default;//表单默认值
	        			var field_default = data[index].field_default;
	        			var appendHtml = ' <tr>'
	                        + ' <td>'+$("#from_field_table").children().length+'</td>'
	                        + ' <td><input type="checkbox" name="field_select"></td>'
	                        + ' <td><input type="text" style="width: 100px;height: 35px;"  name="field_name" value="'+field_name+'"></td>'
	                        + ' <td><input type="text" style="width: 100px;height: 35px;"  name="field_comment" value="'+field_comment+'"></td>'
	                        + ' <td><input type="text" style="width: 80px;height: 35px;"  name="field_length" value="'+field_length+'"></td>'
	                        + ' <td><input type="text" style="width: 80px;height: 35px;" name="field_default" value="'+field_default+'"></td>'
	                        + ' <td>'
	                        + ' <select class="selectpicker show-tick form-control" style="height: 35px;font-size: 12px;" name="field_type">';
	                        if("varchar"==field_type){
	                        	appendHtml += '<option value="varchar" selected="selected">varchar</option><option value="int">int</option><option value="double">double</option><option value="text">text</option>';
	                        }else if("int"==field_type){
	                        	appendHtml += '<option value="varchar">varchar</option><option value="int" selected="selected">int</option><option value="double">double</option><option value="text">text</option>';
	                        }else if("decimal"==field_type){
	                        	appendHtml += '<option value="varchar">varchar</option><option value="int">int</option><option value="double" selected="selected">double</option><option value="text">text</option>';
	                        }else if("text"==field_type){
	                        	appendHtml += '<option value="varchar">varchar</option><option value="int">int</option><option value="double">double</option><option value="text" selected="selected">text</option>';
	                        }
	                        appendHtml += '</select>'
	                        appendHtml += '</td>'
	                        appendHtml += '<td><input type="text" style="width: 80px;height: 35px;"  value="'+field_order+'" name="field_order"></td>';
	                        appendHtml += '<td>';
	                        appendHtml += '<select class="selectpicker show-tick form-control" style="height: 35px;font-size: 12px;" name="widget_type">';
	                        if("inline_text" == form_type){
	                        	appendHtml += '<option value="inline_text" selected:selected>inline_text</option>';
	                        	appendHtml += '<option value="select">select</option>';
	                        	appendHtml += '<option value="checkbox">checkbox</option>';
	                        	appendHtml += '<option value="radio">radio</option>';
	                        	appendHtml += '<option value="inline_textarea">inline_textarea</option>';
	                        	appendHtml += '<option value="hidden">hidden</option>';
	                        	appendHtml += '<option value="image_div">image</option>';
	                        }else if("select" == form_type){
	                        	appendHtml += '<option value="select" selected:selected>select</option>';
	                        	appendHtml += '<option value="inline_text" >inline_text</option>';
	                        	appendHtml += '<option value="checkbox" >checkbox</option>';
	                        	appendHtml += '<option value="radio" >radio</option>';
	                        	appendHtml += '<option value="inline_textarea">inline_textarea</option>';
	                        	appendHtml += '<option value="hidden">hidden</option>';
	                        	appendHtml += '<option value="image_div">image</option>';
	                        }else if("checkbox" == form_type){
	                        	appendHtml += '<option value="checkbox" selected:selected>checkbox</option>';
	                        	appendHtml += '<option value="inline_text" >inline_text</option>';
	                        	appendHtml += '<option value="select" >select</option>';
	                        	appendHtml += '<option value="radio" >radio</option>';
	                        	appendHtml += '<option value="inline_textarea">inline_textarea</option>';
	                        	appendHtml += '<option value="hidden">hidden</option>';
	                        	appendHtml += '<option value="image_div">image</option>';
	                        }else if("radio" == form_type){
	                        	appendHtml += '<option value="radio" selected:selected>radio</option>';
	                        	appendHtml += '<option value="select">select</option>';
	                        	appendHtml += '<option value="inline_text">inline_text</option>';
	                        	appendHtml += '<option value="checkbox">checkbox</option>';
	                        	appendHtml += '<option value="inline_textarea">inline_textarea</option>';
	                        	appendHtml += '<option value="hidden">hidden</option>';
	                        	appendHtml += '<option value="image_div">image</option>';
	                        }else if("inline_textarea" == form_type){
	                        	appendHtml += '<option value="inline_textarea" selected:selected>inline_textarea</option>';
	                        	appendHtml += '<option value="radio">radio</option>';
	                        	appendHtml += '<option value="select">select</option>';
	                        	appendHtml += '<option value="inline_text">inline_text</option>';
	                        	appendHtml += '<option value="checkbox">checkbox</option>';
	                        	appendHtml += '<option value="hidden">hidden</option>';
	                        	appendHtml += '<option value="image_div">image</option>';
	                        }else if("image_div" == form_type){
	                        	appendHtml += '<option value="image_div"   selected:selected>image</option>';
	                        	appendHtml += '<option value="hidden">hidden</option>';
	                        	appendHtml += '<option value="inline_text">inline_text</option>';
	                        	appendHtml += '<option value="select">select</option>';
	                        	appendHtml += '<option value="checkbox">checkbox</option>';
	                        	appendHtml += '<option value="radio">radio</option>';
	                        	appendHtml += '<option value="inline_textarea">inline_textarea</option>';	                        	
	                        }else{
	                        	appendHtml += '<option value="hidden" selected:selected>hidden</option>';
	                        	appendHtml += '<option value="image_div">image</option>';
	                        	appendHtml += '<option value="inline_text">inline_text</option>';
	                        	appendHtml += '<option value="select">select</option>';
	                        	appendHtml += '<option value="checkbox">checkbox</option>';
	                        	appendHtml += '<option value="radio">radio</option>';
	                        	appendHtml += '<option value="inline_textarea">inline_textarea</option>';
	                        }
	                        appendHtml += '</select>';
	                        appendHtml += '</td>';
	                        appendHtml += '<td><input type="text" style="width: 80px;height: 35px;" name="form_default" value="'+form_default+'"></td>';
	                        appendHtml += '<td><input type="checkbox" name="is_id" disabled="true"></td>';
	                        if("NO"==is_null){
	                        	//非空
	                        	appendHtml += '<td><input type="checkbox" name="is_null"></td>';
	                        }else if("YES"==is_null){
	                        	appendHtml += '<td><input type="checkbox" checked="checked" name="is_null"></td>';
	                        }
	                        appendHtml += '</tr>';
	                    $("#from_field_table").append(appendHtml); 
	        		}
	        	});
        	}
        },
        error: function () {
        }
    });
}

//添加字段
var appendField = function(){
	//序号自增
	var obj = $("#tpl").children().children().children("tr").children("td");
	obj.each(function(children_index,value){
			if(children_index=='0'){
			$(this).text($("#from_field_table").children().length);
		} 
	});
	var html = '<tr>'+obj.parent().html()+'</tr>';
	$("#from_field_table").append(html); 
}


//删除字段
var delField = function(){
	var select = $("input[name='field_select']:checked");
	if(select.length > 0){
		$.each(select,function(index,value){
			var remove_obj = $(this).parent().parent();
			remove_obj.remove();
		});
	}else{
		alert("请选择栏位!");
	}
	//重新排序
    $("#from_field_table").children().each(function(parent_index,value){
	if(parent_index > 0){
		$(this).children().each(function(children_index,value){
			if(children_index=='0'){
				$(this).text(parent_index);
			}
		});
	}
    }); 
}

//初始化状态
function initState(){
 	   var data_obj = $("#from_field_table").children("tr");
	   $.each(data_obj,function(index,value){
		   if(index>1){
 			   $.each($(this).children("td"),function(children_index,value){
				   if(children_index > 1){
					   var obj_name = $(this).children().attr("name");
					   var obj_val = $(this).children().val();
					   if("field_type"==obj_name && ("double"==obj_val || "text"==obj_val)){
						   var field_length_obj = $(this).parent().find("td input[name='field_length']");
						   field_length_obj.val('');
						   field_length_obj.attr("disabled",true);
					   }
				   }
			   }); 
		   }
	   }); 
} 

$("body").delegate("select[name='field_type']","change",function(){
var field_type = $.trim($(this).val());
if("int"==field_type){
	var field_length_obj = $(this).parent().parent().find("td input[name='field_length']");
	field_length_obj.attr("disabled",false);
}else if("varchar"==field_type){
	var field_length_obj = $(this).parent().parent().find("td input[name='field_length']");
	field_length_obj.attr("disabled",false);
}else if("text"==field_type){
	var field_length_obj = $(this).parent().parent().find("td input[name='field_length']");
	field_length_obj.val('');
	field_length_obj.attr("disabled",true);
}
}); 
</script> 
</body>
